import React, { Component } from "react";
import { BlockList, Footer } from "../Components";
import { connect } from "react-redux";
import { addToCart, reduceNum, deleteNum, fetchList,gotoProductDetail } from "../actions/product";
import { Button, Carousel, Table, Input } from "element-react";
import "element-theme-default";
import cookie from "react-cookies";
import axios from "axios";
import { NavLink } from "react-router-dom";
var _ = require("lodash");


class CartsContext extends Component {
  constructor(props) {
    super(props);
    this.state = {
      img: []
    };
  }
  componentWillMount() {
    axios.post("http://localhost:3000/product/list", {}).then(res => {
      this.setState({
        img: res.data.docs
      });
    });
  }

  add(e) {
    e.stopPropagation();
    let idx = parseInt(e.currentTarget.getAttribute("data-idx"));
    let addToCartProduct = _.uniqWith(this.props.carts, _.isEqual)[idx];
    this.props.addToCart(addToCartProduct);
  }
  reduce(e) {
    e.stopPropagation();
    let idx = parseInt(e.currentTarget.getAttribute("data-idx"));
    let addToCartProduct = _.uniqWith(this.props.carts, _.isEqual)[idx];
    // console.log(addToCartProduct)
    this.props.reduceNum(addToCartProduct);
  }
  delete(e) {
    e.stopPropagation();
    let idx = parseInt(e.currentTarget.getAttribute("data-idx"));
    let addToCartProduct = _.uniqWith(this.props.carts, _.isEqual)[idx];
    this.props.deleteNum(addToCartProduct);
  }
  toProductDetail=(e)=>{
    e.stopPropagation();
    let idx = parseInt(e.currentTarget.getAttribute("data-idx"));
    let addToCartProduct = _.uniqWith(this.props.carts, _.isEqual)[idx];
    // <NavLink to="/product" ></NavLink>
    console.log(addToCartProduct)
    this.props.gotoProductDetail(addToCartProduct)
  }
  render() {
   
    const img = this.state.img;
    const { carts, lists,todetail } = this.props;
    var cls = _.uniqWith(carts, _.isEqual);
    var cartlst = [];
    var total = 0;
    var cls1 = [];
    var imgpro = [];
    for (let i = 0; i < img.length; i++) {
      imgpro.push(
        <NavLink key={i} className="list-group-item" 
        to={`/productdetail/${img[i]._id}`}>
        {/* {nav[i].title} */}
        <img src={`../../public/img/${img[i].pic}`} data-idx={i}/>
        {/* <img src={`../../public/img/${img[i].pic}`} onClick={e=>this.toProductDetail(e)} data-idx={i}/> */}
        </NavLink>
        );
    }
    for (let i = 0; i < cls.length; i++) {
      total += cls[i].quantity * cls[i].price;
      cartlst.push(
        <tr key={i}>
          <td />
          <td>
            <div>
              <strong>{cls[i].title}</strong>
            </div>
          </td>
          <td>
            
          <button
          className="numbtn numchange"
          data-idx={i}
          onClick={e => this.reduce(e)}
        >
          &nbsp;-&nbsp;
        </button>
            {cls[i].quantity}
            <button className="numbtn numchange" data-idx={i} onClick={e => this.add(e)}>
              &nbsp;+&nbsp;
            </button>
            
          </td>
          <td>&yen;{cls[i].price}</td>
          <td>&yen;{cls[i].quantity * cls[i].price}</td>
          <td>
            <Button type="danger" data-idx={i} onClick={e => this.delete(e)}>
              删除
            </Button>
          </td>
        </tr>
      );
    }

    return (
      <div className="container">
        <div className="table-responsive m-t panel panel-warning">
          <table className="table invoice-table">
            <thead>
              <tr>
                <th>清单</th>
                <th>产品名称</th>
                <th>　　　数量</th>
                <th>　单价</th>
                <th>　总价</th>
              </tr>
            </thead>
            <tbody>{cartlst}</tbody>
          </table>

          <table className="table invoice-total">
            <tbody>
              <tr>
                <td className='cartTotalTd'>
                  <strong>合计</strong>
                </td>
                <td className='cartTotalPriceTd'>&yen;{total}</td>
              </tr>
            </tbody>
          </table>
          <div className="text-right">
            <button className="btn btn-primary">
              <i className="fa fa-dollar" /> 去付款
            </button>
          </div>
        </div>
        <div className="well m-t">
          <div className="maybeLike">　猜　你　喜　欢　</div>

          <div className="demo-4 medium">
            <Carousel interval="2000" type="card" height="200px">
              {imgpro.map((item, index) => {
                return (
                  <Carousel.Item key={index}>
                    <h3>{item}</h3>
                  </Carousel.Item>
                );
              })}
            </Carousel>
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = state => {
  // console.log('state',state)
  return {
    carts: state.pros.carts,
    lists: state.pros.lists,
    todetail:state.pros.todetail
  };
};
const Carts = connect(mapStateToProps, {
  addToCart,
  reduceNum,
  deleteNum,
  fetchList,
  gotoProductDetail
})(CartsContext);
export default Carts;
